<template>
  <div class="compet-main">
	<div style="display: inline-block;font-size:18px;margin-bottom: 15px;">
	  	<span>用户手册</span>
	</div>
	<div class="compet-content">
		<div class="tinymce-content" style="display: flex;margin-top: 20px;">
		   <div style="width:134px;text-align: right;">比赛规则：</div>
		  <textarea id="tinymceId" :value="descrition" class="tinymce-textarea"/>
		</div>
		<div style="text-align: center;margin-top:30px;">
			
			<el-button size="mini" type="primary" icon="document" @click='updateManual'>保存
			</el-button>
		</div>		
	</div>
  </div>
</template>
 
<script>
   import load from '../competition/tinymce-components/dynamicLoadScript'
   import toolbar from '../competition/tinymce-components/toolbar.js'
   import plugins from '../competition/tinymce-components/plugins'
   const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'

    export default {
        name: 'Tinymce',
        data() {
            return{

                tinymceId: 'tinymceId',
                height: 435,
                toolbar: [],
				deptName:'',
				gameName:'',
				ticketType:'',
				
                menubar: 'file edit insert view format table',
                languageTypeList: {
                    'en': 'en',
                    'zh': 'zh_CN'
                },
				type:1,
				eventTypeId:'',
				artiCletypes: [],
                // 富文本内容
                descrition: '',
				gameTypeId:'',
				area:'',
				id:''
			
            }
        },
        watch: {
            descrition(val) {
                if (!this.hasChange && this.hasInit) {
                    this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val || ''))
                }
            }
        },
        methods: {
			// 青:
			// /user/findManual   查询
			
			// 青:
			// /user/updateManual  修改

			handleChange(file, fileList){
				this.hideUpload = fileList.length >= this.limit;
			},
			handleRemove(file, fileList) {
				this.hideUpload = fileList.length >= this.limit;
			},
			//发送保存数据接口
		updateManual(){
			this.$http({
				  url: this.$http.adornUrl2('/user/updateManual'),
				  method: 'post',
				  params: this.$http.adornParams({
					  "detail": this.descrition,
					  'id':this.id
				  })
				}).then(({data}) => {
				this.$message({
				  message: '操作成功',
				  type: 'success',
				  duration: 1500,
				})
			})
		},
		//发送查询数据接口
		findManual(){
		 console.log("11111111111111111111111111111")
			this.$http({
			  url: this.$http.adornUrl2('/user/findManual'),
			  method: 'get',
			  params: this.$http.adornParams({
			  })
			}).then(({data}) => {
				 console.log(data.data[0])
			  this.descrition = data.data[0].detail
			  this.id = data.data[0].id
			})  
		},
            init() {
                load(tinymceCDN, (err) => {
                    if (err) {
                        this.$message.error(err.message)
                        return
                    }
                    this.initTinymce()
                })
            },

            initTinymce() {
                const _this = this
                window.tinymce.init({
                    selector: `#${this.tinymceId}`,
                    images_upload_handler: function (blobInfo, success, failure) {
                        var xhr, formData;

                        xhr = new XMLHttpRequest();
                        xhr.withCredentials = false;
                        xhr.open('POST', "https://admin.koudaidj.com/game/alioss/upload");
                        xhr.onload = function () {
                            var json;

                            if (xhr.status != 200) {
                                failure('HTTP Error: ' + xhr.status);
                                return;
                            }
                            json =JSON.parse(xhr.responseText);
                            if (json == "" || json == null) {
                                failure('Invalid JSON: ' + xhr.responseText);
                                return;
                            }
                            success(json.data);
                        };
                        formData = new FormData();
                        formData.append('file', blobInfo.blob(), blobInfo.filename());
                        xhr.send(formData);
                    },
                    language: this.languageTypeList['zh'],
                    height: this.height,
                    body_class: 'panel-body ',
                    object_resizing: false,
                    toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
                    plugins,
                    menubar: this.menubar,
                    end_container_on_empty_block: true,
                    powerpaste_word_import: 'clean',
                    code_dialog_height: 450,
                    code_dialog_width: 1000,
                    advlist_bullet_styles: 'square',
                    advlist_number_styles: 'default',
                    imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
                    default_link_target: '_blank',
                    link_title: false,
                    // Image
                    imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
                    nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
                    init_instance_callback: editor => {
                        if (_this.descrition) {
                            editor.setContent(_this.descrition)
                        }
                        _this.hasInit = true
                        editor.on('NodeChange Change KeyUp SetContent', () => {
                            this.hasChange = true
                            this.descrition = editor.getContent()
                        })
                    },
                    setup(editor) {
                        editor.on('FullscreenStateChanged', (e) => {
                            _this.fullscreen = e.state
                        })
                    }
                })
            },
            destroyTinymce() {
                const tinymce = window.tinymce.get(this.tinymceId)
                if (this.fullscreen) {
                    tinymce.execCommand('mceFullScreen')
                }
                if (tinymce) {
                    tinymce.destroy()
                }
            },
        },
        mounted() {
            this.init()
			this.findManual()
        },
        beforeDestroy() {
            this.destroyTinymce()
        },
        activated() {
            if (window.tinymce) {
                this.initTinymce()
            }
        },
        deactivated() {
            this.destroyTinymce()
        }
    }
</script>

<style scoped="scoped">
	.compet-content span{
		display: inline-block;
		width:120px;
		text-align: right;
	}
	
	
  .main-cont {
    max-width: 100%;
    min-width: 80%;
	padding-bottom:5%;
	background-color: #fff;
  }

  .tinymce-container {
    position: relative;
    line-height: normal;
  }

  .tinymce-container >>> .mce-fullscreen {
    z-index: 10000;
  }

  .tinymce-textarea {
    visibility: hidden;
    z-index: -1;
  }
 .hide .el-upload--picture-card {
     display: none;
 }
 .margin15{margin-right: 15px;margin-top: 15px;}
 .ruleitem {padding-left:10px;margin-top: 15px;}
 .ruleitem .ruleicon{position: relative;top: 3px; left:2px;width:1.2em;height:1.2em;}
 .el-tag + .el-tag {
     margin-left: 10px;
   }
   .button-new-tag{
     height: 32px;
     line-height: 31px;
     padding-top: 0;
     padding-bottom: 0;
 	border-radius: 4px;
 	border-top-left-radius: 0;
 	border-bottom-left-radius: 0;
 	background-color: #f5f7fa;
 	position: relative;
 	left: -5px;
 	border-color: #dcdfe6;
 	border: 1px solid #dcdfe6;
   }
   .input-new-tag {
     width: 90px;
     margin-left: 10px;
     vertical-align: bottom;
   }
   .el-input--small .el-input__inner{
 	  border-top-right-radius: 0;
 	  border-bottom-right-radius: 0;
    }
	.el-table--enable-row-transition .el-table__body td{
		text-align: center;
	}
	.imgWrap .avatar-uploader .el-upload{
		width: 60px;
	}
	.el-table .cell{
		text-align: center!important;
	}
	.el-tag--medium{margin-right: 10px;}
</style>
